星尘

Vue 5【子父组件之间的传值】

发表于 更新于 分类于

父组件传值到子组件（上次的代码）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <!--引入vue.js-->
    <script src="./vue.js"></script>

</head>
<body>
    <div id="app">  
        请输入要显示的列表: <input type="text" v-model="inputValue"></input>   <!--  使用v-model进行数据的双向绑定 -->
        <button v-on:click="submitBtn">确认</button>                           <!--  使用v-on:click定义一个onclick点击事件 -->
        <ul>
            <!--   <li v-for="item in list_data">{{ item }}</li>  之前是使用v-for循环出数据，现在我们用组件的方式实现 -->
            <todo-item v-bind:content="item" v-for="item in list_data">  </todo-item>  
            <!-- todo-item是我们定义的组件，下面定义的名称是TodoItem，我们要使用-将驼峰分开。内容是组件中定义的template，循环的次数受
            list_data的影响。使用v-bind将list_data每个item的数据通过content传递到组件内 -->
        </ul>
    </div>
    
    <script type="text/javascript">
        //  全局组件
        Vue.component("TodoItem", {
            props:['content'],                     //使用props来接受组件外传来的参数，其中content就是传来的
            template:"<li> {{ content }} </li>"    //显示传来的内容
        })

        var app = new Vue({    // 实例化一个Vue
            el: "#app",        // 使用el绑定
            data :{
                "list_data": ["1111", '2222', '3333'],   // 初始赋值
                "inputValue" : ""
            },
            methods:{
                submitBtn: function(){         // 定义一个onclick点击方法
                    // alert(this.inputValue)  // 取到文本框中绑定的值
                    this.list_data.push(this.inputValue)  // 将文本框中输入值放入到循环显示的列表中
                    this.inputValue = ""                  // 将文本框清空
                }
            }
        })
    </script>
</body>
</html>

子组件传值到父组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <!--引入vue.js-->
    <script src="./vue.js"></script>

</head>
<body>
    <div id="app">  
        请输入要显示的列表: <input type="text" v-model="inputValue"></input>   <!--  使用v-model进行数据的双向绑定 -->
        <button v-on:click="submitBtn">确认</button>                           <!--  使用v-on:click定义一个onclick点击事件 -->
        <ul>
            <!-- 再次传递一个值，itme是循环的值，index是该值的索引。@delete是监听delete事件，如果子组件有触发delete事件，那就执行父组件的realDeleteItem方法。这里的v-bind可以使用:来代替 -->
             <todo-item :content="item" :index="index" v-for="(item, index) in list_data" @delete="realDeleteItem">  </todo-item>  
          <!--   <todo-item v-bind:content="item"  v-bind:index="index" v-for="(item, index) in list_data" @delete="realDeleteItem">  </todo-item>   -->
        </ul>
    </div>
    
    <script type="text/javascript">
        // 局部组件
        var TodoItem = {
            props:['content', 'index'],                                 //使用props来接受组件外传来的参数，其中content就是传来的
            template:"<li @click='deleteItem'> {{ content }} </li>",    //显示传来的内容,并且为这个li加上一个点击事件
            methods:{
                deleteItem: function(){                                 // 定义deleteItem方法
                    this.$emit("delete", this.index)    //当点击每个li的时候，向外触发一个delete事件，并传递一个索引index出去
                }
            }
        }

        var app = new Vue({    // 实例化一个Vue
            el: "#app",        // 使用el绑定
            data :{
                "list_data": ["1111", '2222', '3333'],   // 初始赋值
                "inputValue" : ""
            },
            methods:{
                submitBtn: function(){         // 定义一个onclick点击方法
                    // alert(this.inputValue)  // 取到文本框中绑定的值
                    this.list_data.push(this.inputValue)  // 将文本框中输入值放入到循环显示的列表中
                    this.inputValue = ""                  // 将文本框清空
                },

                realDeleteItem:function(index){
                    this.list_data.splice(index, 1)
                }
            },
            components:{                       // 注册局部组件
                TodoItem:TodoItem
            }
        })
    </script>
</body>
</html>